<template>
  <div>
    <!-- 搜索框 -->
    <div class="search" :model="searchForm">
      <el-input
        class="search-input"
        placeholder="请输入公司关键词"
        v-model="searchForm.querystring"
        clearable
        @keyup.enter.native="getcompanylist()"
      ></el-input>
      <el-button class="search-btn" type="primary" @click="getcompanylist">搜索</el-button>
      <div>
        <ul>
          <li>
            <span>工作地点&nbsp;&nbsp;：</span>
            <el-cascader
              expand-trigger="hover"
              :options="workplace"
              :props="workplaceProps"
              v-model="searchForm.placeids"
              @change="handleWorkChange"
            >
            </el-cascader>
          </li>
        </ul>
      </div>
    </div>
    <div  class="index" >
        <div class="hotwork">
          <ul>
              <li v-for="(company,index) in companylist" :key="index">
                  <div class="pic">
                    <img :src="'http://120.48.37.120:9000/parttime/'+company.companypic" alt="">
                  </div>
                  <div class="job">
                      <span class="jobs">{{company.companyname}}</span>
                      <span class="attention">{{company.comadvantage}}</span>
                  </div>
                  
                  <div class="btn" >
                      <el-button type="success" @click="companyDetail(company.id)">查看详情</el-button>
                  </div>
              </li>
          </ul>
      </div>
    </div>
    <div class="page">
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchForm.pagenum"
        :page-sizes="[1, 5, 8, 10]"
        :page-size="searchForm.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template> 

<script>
import _ from 'lodash'

export default {
  data() {
    return {
      searchForm: {
        querystring: '',
        pagenum: 1,
        pagesize: 10,
        placeids: '',
      }, //搜索选项
      workplace: [],
      edulist: [],
      companylist: [],
      total: 0,
      workplaceProps: {
        label: 'placename',
        value: 'id',
        children: 'children',
      },
    }
  },
  created() {
    this.getcompanylist(), //搜索职位
      this.getWorkplaceList() //工作地点
  },
  methods: {
    
    // 获取所有工作地点分类数据
    async getWorkplaceList() {
      const { data: res } = await this.$http.get('workplace')

      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.workplace = res.data
    },
    
    // 级联选择器选中项变化，会触发这个函数
    
    handleWorkChange() {
      this.getcompanylist()
    },
    

    //监听pagesize改变的事件
    handleSizeChange(newSize) {
      this.searchForm.pagesize = newSize
      this.getcompanylist()
    },
    //监听页码值改变的数据
    handleCurrentChange(newPage) {
      this.searchForm.pagenum = newPage
      this.getcompanylist()
    },
    //获取岗位信息
    async getcompanylist() {
      const form = _.cloneDeep(this.searchForm)
      
      if (form.placeids != "") {
        form.placeids = form.placeids.join(',')
      }

      const { data: res } = await this.$http.get('SearchCompany', {
        params: form,
      })
      if (res.meta.status != 200) return this.$message.error(res.meta.msg)
      this.companylist = res.data.records
      this.total = res.data.total
    },
    async companyDetail(id){
        window.sessionStorage.setItem("comid",id)
        this.$router.push("/CompanyDetail")

    }
    
  },
}
</script>


<style lang="less" scoped>
.search {
  margin: 0 auto;
  padding-left: 12%;
  margin-top: 10px;
  background-color: #fff;
  padding-top: 20px;
  padding-bottom: 5px;
}
.search-input {
  line-height: 70px;
  height: 40px;
  width: 70%;
  font-size: 20px;
  align-items: center;
  margin-left: 20px;
  border-color: #c0c4cc;
}
.search-btn {
  margin-left: 10px;
  width: 10%;
  height: 40px;
  text-align: center;
  font-size: 20px;
}
li {
  list-style: none;
  margin-top: 20px;
  li>span {
    display: inline-block;
    width: 100px;
  }
}
.page {
  margin: 0 auto;
  padding-left: 12%;
  margin-top: 10px;
  background-color: #fff;
  padding-top: 20px;
}
.hotwork{
    li{
        
        padding: 10px 0px 0 20px;
        list-style-type:none;
        background-color: pink;
        width: 78%;
        margin: 0 auto;
        height: 145px;
        margin-bottom: 10px;
        background-color: #fff;
        border-radius: 10px;
        .pic{
            width: 100px;
            height: 120px;
            margin-right: 5%;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .job{
            margin-top: 15px;
            width: 50%;
        }
        .company{
            width: 33%;
        }
        .btn{
            float: right;
            padding-right: 116px;
            padding-top: 30px;
            
        }
        .jobs{
            font-size: 22px;
            font-weight:700;
            display: block;
            margin-bottom: 10px;
        }
        .attention{
            background-color: #F6F7F8;
            padding: 5px 10px 5px 10px;
            color: #666666;
            font-size: 10px;
            margin:6px 0 10px 6px;
            float: left;
            border-radius: 10px;
        }
        .salary{
            font-size: 20px;
            font-weight:600;
            display: block;
            margin-bottom: 10px;
            color: red;
        }
        .eduname{
            font-size: 14px;
            margin-bottom: 10px;
            color: #7D6695;
            background-color: #F6F7F8;
            text-align: center;
            border-radius: 12px;
            padding:5px 8px 5px 8px;
        }
        .company{
            padding-left: 20px;
        }
        .companyname{
            font-size: 18px;
            margin: 22px 0 15px 0;
            font-weight:700;
        }
        .placename{
            color: #999999;
        }
        div{
            float: left;
        }
        span{
            display: block;
        }

    }
    li:hover{
        box-shadow: 1px 1px 5px #888888;
    }
    el-pagination{
      margin-left: 20%;
    }
}
</style>